<template>
  <div>
    <el-table :data="roles" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="#ID"></el-table-column>
      <el-table-column prop="roleName" label="名称"></el-table-column>
      <el-table-column prop="roleKey" label="权限字符串"></el-table-column>
      <el-table-column prop="roleSort" label="权值"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.type==0?'系统内置角色，禁止编辑':'编辑'" placement="top">
            <el-button type="primary" icon="el-icon-edit"
                       size="small" @click="updateRole(scope.row)"
                       circle :disabled="scope.row.type==0"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="scope.row.type==0?'系统内置角色，禁止删除':'删除'" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="small"
                       @click="delRole(scope.row.id)"
                       circle :disabled="scope.row.type==0"></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="scope.row.type==0?'系统内置角色，禁止分配权限':'分配权限'" placement="top">
            <el-button type="warning" icon="el-icon-unlock" size="small"
                       @click="assign(scope.row.id)"
                       circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    updateRole(role) {
      this.$emit('update', role)
    },
    delRole(id) {
      this.$emit('delete', id)
    },
    assign(id) {
      this.$emit('assign', id)
    }
  },
  props: {
    roles: {
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>

</style>
